//--------------------------生成函数-------------
//删除键盘
var deleteKeyBoard=function(){
	var keyBoard=document.getElementById("keyboard");
	
	document.body.removeChild(box);
}
//转换大小写
var judge=1;
var transCode=function(){
	var o=document.getElementById("box");
	
	if(judge){
		judge=0;
	}else{
		judge=1;
	}
	
	return judge;//1大写；0小写
}
//创建键盘
var create=function(){
	var createKeyBoard=function(){
		var theKeyBoard=document.createElement("div");
		var box=document.createElement("div");
		theKeyBoard.setAttribute("id","keyboard")
		box.setAttribute("id","box")

		var i=null;
		var k=null;
		if(transCode()){
			i=65;k=91;
		}else{
			i=97;k=123;
		}
		for(i;i<k;i++){
			theKeyBoard.appendChild(createKey(i));
		}
		
		theKeyBoard.appendChild(specialKey());
		theKeyBoard.appendChild(transKey());
		theKeyBoard.appendChild(codeKey());
		
		box.appendChild(theKeyBoard);
		document.body.appendChild(box);
		
	};
	var codeKey=function(){
		var theKey=document.createElement("div");
		theKey.setAttribute("class","key");
		
		theKey.setAttribute("id","num");
//		theKey.setAttribute("type","submit");
		theKey.innerHTML="-";
		
		theKey.appendChild(numKB());
		return theKey;
	}
	var numKB=function(){
		var div=document.createElement("div");
		div.setAttribute("id","numKB");
		for(var i=48;i<58;i++){
			div.appendChild(num(i));
		}
		div.appendChild(spe(46));
		div.appendChild(spe(95));
		return div;
	}
 	var spe=function(i){
 		var theKey=document.createElement("div");
 		theKey.className="key";
 		theKey.setAttribute("id","spe"+i);
 		theKey.innerHTML=String.fromCharCode(i);
 		return theKey;
 	}
	var num=function(i){
		var theKey=document.createElement("div");
//		
//		theKey.setAttribute("class","key");
		theKey.className="key";
		theKey.setAttribute("id","num"+String.fromCharCode(i));
		theKey.setAttribute("data-asc",i);
		theKey.innerHTML=String.fromCharCode(i);
		return theKey;		
	}
	var transKey=function(){
		var theKey=document.createElement("div");
		
		theKey.setAttribute("class","key");
		
		theKey.setAttribute("id","trans");
//		theKey.setAttribute("type","submit");
		theKey.innerHTML="SHIFT";
		return theKey;
	}
	var specialKey=function(){
		var theKey=document.createElement("button");
		
		theKey.setAttribute("class","key");
		
		theKey.setAttribute("id","finish");
		theKey.setAttribute("type","submit");
		theKey.innerHTML="DONE";
		return theKey;
	}
	var createKey=function(i){
		var theKey=document.createElement("div");
//		
//		theKey.setAttribute("class","key");
		theKey.className="key";
		theKey.setAttribute("id",String.fromCharCode(i));
		theKey.setAttribute("data-asc",i);
		theKey.innerHTML=String.fromCharCode(i);
		return theKey;
	}
	createKeyBoard();
	move();
	var ti=0;
	var cssReturn=function(){
		var meta=document.createElement("style");
		meta.setAttribute("type","text/css");
//填充css到网页
		meta.innerHTML=cssData;
		ti++;
		return  meta;
	}
	document.head.appendChild(cssReturn());
}
//------------end-----------------



var move=function(){
	var keys=document.getElementsByClassName("key");
	for(var i=0;i<keys.length;i++){
		keys[i].addEventListener("mousedown",function(e){
			e.target.className="key down";
			put(e.target.id);
		});
		keys[i].addEventListener("mouseup",function(e){
			e.target.className="key";
			times=0;
		});
		keys[i].addEventListener("mouseout",function(e){
			e.target.className="key";
		});
	}
	//添加函数
	var times=0;
	var put=function(haha){
		if(haha !== "finish"){
			if(haha !== "trans"){
				if(haha !== "num"){
					if(haha[1] == "u"){
						if(times==0){me.value+=haha[3];times++;return;}
					}
					if(haha[1] == "p"){
						var v1=haha[3];
						var v2=haha[4];
						var v=v1+v2;
						var cha=String.fromCharCode(v);
						if(times==0){me.value+=cha;times++;return;}
					}
					else{
						if(times==0){me.value+=haha;}
					}
				}
			}
		}
	}
	document.getElementById("finish").addEventListener("mousedown",function(){
		deleteKeyBoard();
	});
	document.getElementById("trans").addEventListener("mousedown",function(){
		deleteKeyBoard();
		create();
	});
};

//选择input标签添加函数代码块
	var getTarget=function(e){
		me=e;
	}
	var tag=document.getElementsByTagName("input");
	var me;
	for(var i=0;i<tag.length;i++){
		tag[i].addEventListener("focus",function(e){
			getTarget(e.target);
			var o=document.getElementById("box");
			if(o){deleteKeyBoard();}
			
			create();
		});
	}

var cssData="body,html{width:100%;height:100%}#box{text-align:center;transform:scale(.5,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;fixed:bottom}#keyboard{position:relative;bottom:0;display:inline-block;width:750pt;height:360px;background-color:#ff6700}.key{position:absolute;z-index:100;width:75pt;height:90pt;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;font-size:5pc;line-height:75pt;cursor:pointer;transition:all .2s ease}.key.down{z-index:99;margin-top:1%}.key:hover{color:#ff6700}#numKB{position:relative;top:-220px;left:100%;display:none;width:25pc;height:360px;background-color:#ff6700}#finish{left:80%;width:200px}#finish,#trans{top:15pc;font-size:50px;line-height:150px}#trans{left:0;width:75pt}#num{top:90pt;left:90%;z-index:10;width:75pt}#num:hover #numKB{display:block}#num0{top:90pt;left:300px}#num1{top:0;left:0}#num2{top:0;left:75pt}#num3{top:0;left:200px}#num4{top:90pt;left:0}#num5{top:90pt;left:75pt}#num6{top:90pt;left:200px}#num7{top:15pc;left:0}#num8{top:15pc;left:75pt}#num9{top:15pc;left:200px}#spe46{top:0;left:300px}#spe95{top:15pc;left:300px}button{padding:0;border:0}#Q{top:0;left:0}#W{top:0;left:10%}#E{top:0;left:20%}#R{top:0;left:30%}#T{top:0;left:40%}#Y{top:0;left:50%}#U{top:0;left:60%}#I{top:0;left:70%}#O{top:0;left:80%}#P{top:0;left:90%}#A{left:0}#A,#S{top:90pt}#S{left:10%}#D{left:20%}#D,#F{top:90pt}#F{left:30%}#G{left:40%}#G,#H{top:90pt}#H{left:50%}#J{left:60%}#J,#K{top:90pt}#K{left:70%}#L{top:90pt;left:80%}#Z{left:10%}#X,#Z{top:15pc}#X{left:20%}#C{left:30%}#C,#V{top:15pc}#V{left:40%}#B{left:50%}#B,#N{top:15pc}#N{left:60%}#M{top:15pc;left:70%}#q{top:0;left:0}#w{top:0;left:10%}#e{top:0;left:20%}#r{top:0;left:30%}#t{top:0;left:40%}#y{top:0;left:50%}#u{top:0;left:60%}#i{top:0;left:70%}#o{top:0;left:80%}#p{top:0;left:90%}#a{left:0}#a,#s{top:90pt}#s{left:10%}#d{left:20%}#d,#f{top:90pt}#f{left:30%}#g{left:40%}#g,#h{top:90pt}#h{left:50%}#j{left:60%}#j,#k{top:90pt}#k{left:70%}#l{top:90pt;left:80%}#z{left:10%}#x,#z{top:15pc}#x{left:20%}#c{left:30%}#c,#v{top:15pc}#v{left:40%}#b{left:50%}#b,#n{top:15pc}#n{left:60%}#m{top:15pc;left:70%}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-size:1em;font-family:monospace}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}";